<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="num1" placeholder="请输入数字">
    <select name="" id="sel">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" id="num2" placeholder="请输入数字">
    <button id="button">=</button>
    <input type="text" id="result">


    <script src="../js/tools.js"></script>

    <script>

        // 测试函数
        // var res = calc(3 , 2 , '*') ;
        // console.log(res);


        // 先获取相关的元素   
        var oInp1 = document.getElementById('num1') ;
        var oInp2 = document.getElementById('num2') ;
        var oBtn = document.getElementById('button') ;
        var oSel = document.getElementById('sel') ;
        var oResult = document.getElementById('result') ;

        // 如果没有正确的获取到元素  就会得到 null  空对象

        console.log(oBtn); 

        // 绑定事件
        oBtn.onclick = function() {
            // 测试
            // alert(666) ;

            // 获取输入框的值
            var n1 = oInp1.value ;
            var n2 = oInp2.value ;
            // 获取符号
            var f = oSel.value ;

            console.log(n1 , n2 , f);

            // 先判断
            //   有没有输入
            if(n1 && n2) {
                // 如果已经输入了，就判断是不是数字
                if(!isNaN(n1) && !isNaN(n2)) {
                    n1 *= 1 ;
                    n2 *= 1 ;
                    oResult.value = calc(n1 , n2 , f) ;
                } else {
                    alert('对不起，输入的不是数字');
                }
            } else {
                alert('请输入') ;
            }

        }

        
        
    </script>
    
</body>
</html>